Erratum - 404 Error pages + Coming soon + login Tailwind css Template

Introduction

  • Item Name : Erratum - 404 Error pages + Coming soon + login Tailwind css Template
  • Item Version : 4
  • Author : Ashish Maraviya
  • Copyright : 2024

First of all, Thank you so much for purchasing this 'Erratum template' and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and Tailwind CSS knowledge is required to customize this item. You may learn basics here and here.

Getting Started

Requirements

You will need the following sofwares to customize the pricing tables.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
Note : Be careful while editing the item. If not edited properly, the design layout may break completely.

Include Files

  • HTML
  • CSS
  • SCSS
  • Tailwind css
  • JS

Tailwind css (v 3.4.0) Grid System

If you want to use three column of pricing tables

<div class="w-full  flex  items-center  justify-center">
	<div class="flex  flex-wrap">
		<div class="xl:w-[33.33%]  sm:w-[50%]">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

If you want to use four column of pricing tables

<div class="w-full  flex  items-center  justify-center">
	<div class="flex  flex-wrap">
		<div class="xl:w-[33.33%]  sm:w-[50%]  w-full">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

Customization

HTML File Customization (for classic demo)

You can open index.html file in code editer software. Copy all code(Ex. if you want to use classic style) and paste in your website.

<!--
    Item Name: Erratum - 404 Error pages + Coming soon + login Tailwind css Template
    Author: Ashish Maraviya
    Version: 1.0
    Copyright 2024
-->
<!DOCTYPE html> 
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Erratum – Multi purpose error page template for Service, corporate, agency, Consulting, startup.">
    <meta name="keywords" content="Error page 404, page not found design, wrong url, login, coming soon">
    <meta name="author" content="Ashishmaraviya">
    <link rel="icon" href="assets/images/favicon.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/>
    <title>404 - Error page pack all in one</title>
    <!--Google font-->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap" rel="stylesheet">
    <!-- tailwindcss -->
    <script src="assets/js/tailwindcss3.4.0.js"></script>
    <!-- Theme css -->
    <link rel="stylesheet" type="text/css" href="assets/css/error-page.css">
</head>
<body>
    <!-- 01 Preloader -->
    <div class="loader-wrapper h-screen w-screen flex bg-[#fff] items-center justify-center fixed top-0 z-[9]" id="loader-wrapper">
        <div class="loader h-[50px] w-[50px] rounded-[50%]"></div>
    </div>
    <!-- Preloader end -->
    <!-- 02 Main page -->
    <section class="page-section bg-[url('assets/images/background-1.png')] bg-cover bg-no-repeat bg-center min-h-screen">
        <div class="w-full px-[16px]">
            <div class="content-detail h-screen flex justify-center items-center flex-col">
                <h1 class="global-title block text-[#5bc86d] mb-[8px] leading-[1.2] md:text-[150px] md:font-extrabold min-[481px]:text-[120px] min-[481px]:font-bold text-[80px] font-semibold"><span>4</span><span>0</span><span>4</span></h1>

                <h4 class="block text-[#5076db] text-center md:text-[30px] leading-[1.2] md:font-semibold min-[481px]:text-[25px] text-[22px] font-medium mb-[15px]">Oops!</h4>

                <p class="block text-center text-[#5076db] mb-[16px] md:text-[16px] text-[14px]">We're sorry,<br> The page you were looking for doesn't exist anymore.</p> 

                <div class="mt-[15px]">
                    <a href="index.html" class="py-[8px] px-[15px] leading-[42px] text-[#5076db] border-[1px] border-solid border-[#5076db] text-[14px] rounded-[30px] hover:text-[#fff] hover:bg-[#5076db]">Back to Home</a>
                </div>
            </div>
        </div>
    </section>
    <!-- latest jquery-->
    <script src="assets/js/jquery-3.5.1.min.js"></script>
    <!-- Theme js-->
    <script src="assets/js/script.js"></script>
</body>
</html>

Custom Font Colors (for classic demo)

Erratum use two types of color #5bc86d(Green color), #5076db(Blue color)

For example : you can change color red and green. to replace with #5bc86d, #5076db

Hex Code

For example : you can change color #FF0000 and #008000. to replace with #5bc86d, #5076db

#5bc86d color replace with #FF0000 color code in all places.

#5076db color replace with #008000 color code in all places.

Thank You

Thank you again for download Erratum Template, enjoy it and give us ratting.